<template>
  <div class="detection-result-main bgcFFF">
    <div class="data-box">
      <!-- 年份 月份 -->
      <div class="time">
        <p class="fs16 color333 text-c">
          <i @click="pickPre(currentYear)" class="pr iconfont icongengduox"></i>
          {{ currentYear }}年
          <i @click="pickNext(currentYear)" class="pr iconfont icongengduox"></i>
        </p>
      </div>
      <!-- 日期 -->
      <ul class="days">
        <li class="days-li" @click="pick(month, index)" v-for="(month, index) in months" :key="index">
          <span v-if="
                  currentYear == new Date().getFullYear() &&
                   month == new Date().getMonth() + 1"
                class="day active">
            {{ month }}
          </span>
          <span v-else class="day">{{ month }}</span>
        </li>
      </ul>
    </div>

    <!--图表-->
    <div class="chart-box pr">
      <p class="chart-title fs16 color333 pa">
        <i class="inline-block"></i>心率血压
      </p>
      <ve-line
        height="300px"
        :data="chartData"
        :legend-visible="false"
        :extend="extend"
        :data-zoom="dataZoom">
      </ve-line>
    </div>
    <!--图表-->

    <!--参考数据-->
    <div class="data-reference">
      <p class="title">
        <span
          :class="{'active':item.id == referenceType}"
          v-for="(item, index) in referenceTypeData"
          :key="index"
          @click="getReferenceData(item.id)">{{item.txt}}</span>
      </p>
      <ul>
        <li class="flex fs14 color45454D"
            v-for="(item, index) in referenceData"
            :key="index">
          <div class="box text-l">
            <i :style="{backgroundColor: color[index]}" class="pr"></i>
            {{item.txt}}
          </div>
          <div class="box text-r">
            {{item.value}}
          </div>
        </li>
      </ul>
    </div>
    <!--参考数据-->

    <!--数据明细-->
    <div class="data-detail">
      <p class="title fs16">
        数据明细
      </p>
      <ul>
        <li class="flex fs14 color45454D">
          <div class="box text-l">
            测量时间
          </div>
          <div class="box text-r">
            心率(bpm)
          </div>
          <div class="box text-r">
            血压(mmhg)
          </div>
        </li>
        <pull-up-reload
          :on-infinite-load="onInfiniteLoad"
          :parent-pull-up-state="infiniteLoadData.pullUpState">
          <li class="flex fs16 color45454Dr" v-for="(item, index) in dataDetail" :key="index">
            <div class="time box text-l fs12 color666" v-html="formatTime(item.time)"></div>
            <div class="box text-r">
              {{item.bpm}}
            </div>
            <div class="box text-r">
              {{item.mmhg}}
            </div>
          </li>
        </pull-up-reload>
      </ul>

    </div>
    <!--数据明细-->
  </div>
</template>

<script type="text/ecmascript-6">
  import PullUpReload from '../../components/PullUpReload.vue'
  export default {
    components: {
      PullUpReload,
    },
    data () {
      return {
        currentYear: '',   // 年份
        currentMonth: '',  // 月份
        currentDay: '',    // 日期
        months: [],
        yearNow: '', // 记录当前年份
        monthNow: '', // 记录当前月份

        extend: {
          yAxis: {
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle:{
                color: ['rgba(61,126,255, .08)'],
                width: 1,
                type: 'solid'
              }
            }
          },
          grid: {
            show: true,
            top: 50,
            left: 10,
            backgroundColor: '#FDFFFF',
            borderColor: 'transparent'
          },
          tooltip: {
            show: true,
            formatter: function(options) {
              let htmlStr = `<div style="background: #fff;color: #333;box-shadow: 0px 0.5px 3px 0px #B6BFC6;padding: 8px;border-radius: 4px;"><p style="color: #666;font-size: 12px">${options[0].name}</p>`
              for(let i = 0, len = options.length; i < len; i++) {
                htmlStr += `<p>
                              <i style="position: relative;top: -2px;display: inline-block;background: ${options[i].color};width: 4px;height: 4px;border-radius: 50%;"></i>
                              ${options[i].seriesName}
                              <span style="color: ${options[i].color};font-size: 16px;margin-left: 2px;">${options[i].value[1]}</span>${i<1?'bpm':'mmhg'}
                            </p>`
              }
              htmlStr += `</div>`
              return htmlStr
            },
            backgroundColor: 'transparent',
          },
          color: ['#3D7EFF', '#F55D44', '#34C46D'],
        },
        dataZoom: [
          {
            type: 'slider',
            backgroundColor: '#F7F7F7',
            borderColor: '#F7F7F7',
            height: 8,
            handleSize: 14,
            handleColor: '#fff',
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            fillerColor: '#C9E4FF',
            handleStyle: {
              color: '#C9E4FF',
              borderColor: '#C9E4FF',
              shadowBlur: 4,
              shadowOffsetX: 1,
              shadowOffsetY: 1,
              shadowColor: '#C9E4FF',
              borderWidth: 0,
            },
            dataBackground: {
              areaStyle: {
                color: '#F7F7F7'
              },
              lineStyle: {
                color: '#F7F7F7'
              }
            },
            start: 0,
            end: 100
          }
        ],
        chartData: {
          columns: ['日期', '心率', '血压 高', '血压 低'],
          rows: [
            { '日期': '1月1日', '心率': 15, '血压 高': 12 , '血压 低': 10},
            { '日期': '1月2日', '心率': 12, '血压 高': 25 , '血压 低': 10},
            { '日期': '1月3日', '心率': 21, '血压 高': 10 , '血压 低': 5},
            { '日期': '1月4日', '心率': 41, '血压 高': 32 , '血压 低': 10},
            { '日期': '1月5日', '心率': 31, '血压 高': 30 , '血压 低': 10},
            { '日期': '1月6日', '心率': 71, '血压 高': 55 , '血压 低': 10}
          ]
        },

        referenceType: 1,//参考数据选中类型
        referenceTypeData: [
          {
            txt: '心率参考',
            id: 1
          },
          {
            txt: '血压参考',
            id: 2
          }
        ],//参考数据类型
        referenceData: [
          {
            txt: '热身',
            value: '91~109bpm'
          },
          {
            txt: '燃脂',
            value: '110~127bpm'
          },
          {
            txt: '有氧耐力',
            value: '128~145bpm'
          },
          {
            txt: '无氧耐力',
            value: '146~163bpm'
          },
          {
            txt: '极限',
            value: '164~182bpm'
          },
        ],// 参考数据
        color: [
          '#5C8DFF',
          '#4CB034',
          '#FFBA3C',
          '#FE8E4A',
          '#FF3A2F',
        ], // 参考数据颜色
        dataDetail: [],//数据详情
        page:0,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        },
      }
    },

    created () {
      this.initData()
      this.getDataDetail()
    },
    mounted() {
    },
    methods: {
//
      getReferenceData(id) {
        this.referenceType = id
      },
      // 数据明细
      getDataDetail(more) {
        const _this = this
        _this.$ajax({
          url: '/getDataDetail',
          method: 'post'
        }, {
          page: _this.page,
          time: `${this.currentYear}-${this.currentMonth}`,
        }).then(res => {
          let data = res.data.content.data
          if (!more) {
            _this.dataDetail = data
          }
          if (more) {
            _this.dataDetail = _this.dataDetail.concat(data)
          }
        })
      },
      // 测量时间处理
      formatTime(time) {
        let timer = time.split(' ')
        return `<p style="line-height: 20px;">${timer[0]}</p><p style="line-height: 20px;">${timer[1]}</p>`
      },
      // 上拉加载
      onInfiniteLoad(done) {
        if (this.infiniteLoadData.pullUpState === 0) {
          this.page++
          this.getDataDetail('more')
        }
        done()
      },

      // 日期初始化
      initData(year) {
        let date = new Date()
        // 初始化调用/点击上一年下一年回到当前年份要重新获取当前年月进行匹配
        if(!year || (year && year === date.getFullYear())) {
          // 当前年份
          this.currentYear = date.getFullYear()
          this.yearNow = this.yearNow ? this.yearNow :this.currentYear
          // 当前月份
          this.currentMonth = date.getMonth() + 1
          this.monthNow = this.monthNow ? this.monthNow : this.currentMonth
          this.$nextTick(() => {
            let W = $('body').width()
            let dayInitX = $('.active').offset().left
            let days = $('.days')
            // 当前日期超出屏幕范围，进入页面时设置显示在可视区域内
            if(W < dayInitX)days.scrollLeft(dayInitX - W + 44);
          })
        }
        // 点击上一年下一年不是当前年份
        if(year && year !== date.getFullYear()){
          this.currentYear = year
          this.currentMonth = 1
          this.$nextTick(() => {
            $('.days').scrollLeft(0);
          })
        }
        // 请求数据详情
        this.getDataDetail()
        // 初始化日期数组
        this.months.length = 0
        /**
         * 获取日期对应的当月天数转化为日期并添加进日期数组
         * 每个年都从1月开始
         */
        for (let i = 1; i <= 12; i++) {
          this.months.push(i)
        }
      },

      // 上一年
      pickPre(year) {
        $('.days-li').children('span').removeClass('active')
        if(year > 1970)year -= 1
        this.initData(year)
      },

      // 下一年
      pickNext(year) {
        $('.days-li').children('span').removeClass('active')
        year += 1
        this.initData(year)
      },

      // 当前选择日期
      pick(date, index) {
        // 选择时间不能超过当前月
        if(this.yearNow < this.currentYear ||
          (this.yearNow === this.currentYear && this.monthNow < date)) {
          console.log('超出当前时间范围');
          return false;
        }
        $('.days-li').children('span').removeClass('active')
        $('.days-li').eq(index).children('span').addClass('active')
        console.log(this.currentYear + '-' + date);
        this.getDataDetail()
      },
    }
  }
</script>

<style scoped lang="scss">
@import "../../assets/css/healthMonitoring/detectionResult";
</style>
